import React, { Component } from "react";
import { DeleteOutlined, PlusCircleOutlined, EditOutlined } from '@ant-design/icons';
import { SketchPicker } from 'react-color';
import { Button, message, Modal, Input, Divider } from "antd";
import { getVideoTagList, addVideoTag, deleteVideoTag, modifyVideoTag } from '@/api/video'
import TableComponent from '@/components/TableList';
import SearchHeader from '@/components/SearchHeader'
import { widgetProps } from '@/utils/constant';
class TagList extends Component {
  tableRef = React.createRef();
  state = {
    list: [],
    isModalVisible: false, // 编辑新增 显示控制
    currentRowData: {},
    loading: false,
    inputValue: '',
    tagColor: '', // 标签颜色
    listQuery: {},
    tagId: '',
    editMode: false // 添加 编辑模式
  };

  // 处理搜索
  handleSearch = (listQuery) => {
    this.setState({
      listQuery
    });
  };

  handleDlete = (row) => {
    const { id } = row
    deleteVideoTag({ id }).then(res => {
      message.success("删除成功")
      this.tableRef.current.fetchData();
    }).catch(e => {
      message.error(e || "删除失败")
    })
  }

  hadnleAditAddOkHandler = (values, form) => {
    this.setState({
      loading: true
    })
    const params = {
      name: this.state.inputValue, // 标签名称
      color: this.state.tagColor // 标签颜色
    };
    if (this.state.editMode) {
      params.id = this.state.tagId
    }
    const handler = this.state.editMode ? modifyVideoTag : addVideoTag;
    handler(params).then(() => {
      this.tableRef.current.fetchData();
      message.success(this.state.editMode ? "编辑成功 !" : "新增成功 !")
    }).catch(e => {
      message.error("操作失败 !")
    }).finally(() => {
      this.setState({
        isModalVisible: false,
        loading: false,
        inputValue: '',
        tagColor: ''
      });
    });

  };


  handleAddTag = (row) => {
    this.setState({
      isModalVisible: true,
      editMode: false
    });
  };

  handleEditTag = (row) => {
    this.setState({
      isModalVisible: true,
      editMode: true,
      tagId: row.id,
      inputValue: row.name,
      tagColor: row.color
    });
  };
  handleCancelAdd = () => {
    this.setState({
      inputValue: '',
      tagColor: '',
      isModalVisible: false,
    })
  };

  handleInputCHange = (e) => {
    this.setState({
      inputValue: e.target.value
    });
  };

  handleColorChange = (color, event) => {
    console.log(color.hex);
    this.setState({
      tagColor: color.hex
    });
  };

  // 头部搜索配置
  meta = {
    fields: [
      {
        key: 'name',
        label: '标签名称',
        widgetProps
      }
    ],
  };

  // 表格列 字段定义
  columns = [
    {
      title: '标签ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '标签名称',
      dataIndex: 'name',
      key: 'name',
      render: (name, row) => (<span style={{ color: row.color }}>{name}</span>)
    },

    {
      title: '操作',
      key: 'action',
      render: (text, row) => (
        <>
        <Button type="primary" shape="circle" icon={<EditOutlined />} title="edit" onClick={this.handleEditTag.bind(null, row)} />
        <Divider type="vertical" />
        <Button type="primary" shape="circle" icon={<DeleteOutlined />} title="delete" onClick={this.handleDlete.bind(null, row)} />
        </>
      )
    }

  ];
  render() {

    return (
      <>
        <SearchHeader onSearch={this.handleSearch} meta={this.meta}>
          <Button type='primary' onClick={this.handleAddTag} icon={<PlusCircleOutlined />}>新增标签</Button>
        </SearchHeader>
        <br />
        <TableComponent getTableListApi={getVideoTagList} columns={this.columns} queryParams={this.state.listQuery} ref={this.tableRef} onGetData={this.handleGetData} />
        <Modal confirmLoading={this.state.loading} title={this.state.editMode ? '编辑标签': '新增标签'} visible={this.state.isModalVisible} onOk={this.hadnleAditAddOkHandler} onCancel={this.handleCancelAdd}>
          <h5>标签名称：</h5>
          <Input className="mb10" placeholder='请输入视频标签名称.' value={this.state.inputValue} onChange={this.handleInputCHange} />
          <h5>标签颜色：</h5>
          <SketchPicker color={ this.state.tagColor } onChange={ this.handleColorChange }/>
        </Modal>
      </>
    );
  }
}

export default TagList;
